<template>
  <footer class="twui-footer">
    <div class="twui-footer__layout" v-if="!back">
      <ul>
        <li
          :class="{active: currentActive === 1}"
          @click=handleTabClick(1)
          style="width:50px;min-width:50px;">首页</li>
        <li
          :class="{active: currentActive === 5}"
          @click=handleTabClick(5)
          style="width:50px;min-width:50px;">学校</li>
        <li
          :class="{active: currentActive === 6}"
          @click=handleTabClick(6)
          style="width:50px;min-width:50px;">教师</li>
        <li
          :class="{active: currentActive === 7}"
          @click=handleTabClick(7)
          style="width:50px;min-width:50px;">学生</li>
        <!-- <li style="width:50px;min-width:50px;"
          :class="{active: currentActive === 9}"
          @click=handleTabClick(9)>服务</li> -->
        <li
          :class="{active: currentActive === 8}"
          @click=handleTabClick(8)
          style="width:50px;min-width:50px;">招生</li>

        <li
          :class="{active: currentActive === 4}"
          @click=handleTabClick(4)>服务监控</li>

        <li
          :class="{active: currentActive === 10}"
          @click=handleTabClick(10)
          style="min-width:50px;margin:0;">阅读</li>
        <li
          :class="{active: currentActive === 11}"
          @click=handleTabClick(11) style="margin:0 12px;">
          <a href="http://10.100.1.62/portal/ui/login?service=http://10.100.1.62:80/portal/" target="_blank" style="color:#bbcdff;">视频监控</a>
        </li>
        <!-- <li
          :class="{active: currentActive === 2}"
          @click=handleTabClick(2)>应用监控</li> -->
        <!-- <li
          :class="{active: currentActive === 3}"
          @click=handleTabClick(3)>API监控</li><li-->
          <!--:class="{active: currentActive === 5}"-->
          <!--@click=handleTabClick(5)>数据监控</li>
        <li
          :class="{active: currentActive === 6}"
          @click=handleTabClick(6)>教学监控</li>
        <li
          :class="{active: currentActive === 7}"
          @click=handleTabClick(7)>资源监控</li>-->

      </ul>
      <div class="twui-footer__nav-buttons" v-show="jumperVisible && hasScroll">
        <a @click="handleClickUp" :class="{disabled: atFirst}"><img src="/static/weishidataview/images/arrow-up.png" alt="up"></a>
        <a @click="handleClickDown" :class="{disabled: atLast}"><img src="/static/weishidataview/images/arrow-down.png" alt="up"></a>
      </div>
    </div>
    <div class="twui-footer__layout" v-if="back">
      <a class="twui-footer__back" @click="backToIndex">
        <img src="/static/weishidataview/images/back.png" alt="back">
        返回首页</a>
    </div>
  </footer>
</template>

<script scoped>
export default{
  props: {
    maxPage: Number,
    back: {
      type: Boolean,
      default: false
    },
    hasScroll: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    let screen = window.screen.width
    if (screen === 1024) {
      this.jumperVisible = false
    }
  },
  data () {
    return {
      // currentActive: 1,
      jumperCurrent: 1,
      jumperVisible: true,
      pauseClick: false
    }
  },
  computed: {
    atFirst: function () {
      return this.jumperCurrent === 1
    },
    atLast: function () {
      return this.jumperCurrent === this.maxPage
    },
    currentActive: function () {
      if (this.$route.path.indexOf('main') > 0) {
        return 1
      }
      if (this.$route.path.indexOf('applicationmonitoring') > 0) {
        return 2
      }
      if (this.$route.path.indexOf('apimonitoring') > 0) {
        return 3
      }
      if (this.$route.path.indexOf('servicemonitoring') > 0) {
        return 4
      }
      // if (this.$route.path.indexOf('datamonitoring') > 0) {
      if (this.$route.path.indexOf('schoolmonitoring') > 0) {
        return 5
      }
      // if (this.$route.path.indexOf('teachingmonitoring') > 0) {
      if (this.$route.path.indexOf('teachermonitoring') > 0) {
        return 6
      }
      // if (this.$route.path.indexOf('resourcemonitoring') > 0) {
      if (this.$route.path.indexOf('studentmonitoring') > 0) {
        return 7
      }
      if (this.$route.path.indexOf('enrollmentinformation') > 0) {
        return 8
      }
      if (this.$route.path.indexOf('forecasemonitoring') > 0) {
        return 9
      }

      if (this.$route.path.indexOf('reading') > 0) {
        return 10
      }
      return 0
    }
  },
  methods: {
    backToIndex: function () {
      this.$router.push('/index')
    },
    handleTabClick (index) {
      // this.currentActive = index
      if (index === 1) {
        this.$router.push('/index/main')
        this.jumperCurrent = 1
      }
      if (index === 2) {
        this.$router.push('/index/applicationmonitoring')
      }
      if (index === 3) {
        this.$router.push('/index/apimonitoring')
      }
      if (index === 4) {
        this.$router.push('/index/servicemonitoring')
      }
      if (index === 5) {
        // this.$router.push('/index/datamonitoring')
        this.$router.push('/index/schoolmonitoring')
      }
      if (index === 6) {
        // this.$router.push('/index/teachingmonitoring')
        this.$router.push('/index/teachermonitoring')
        this.jumperCurrent = 1
      }
      if (index === 7) {
        // this.$router.push('/index/resourcemonitoring')
        this.$router.push('/index/studentmonitoring')
      }
      if (index === 8) {
        this.$router.push('/index/enrollmentinformation')
      }
      if (index === 9) {
        this.$router.push('/index/forecasemonitoring')
      }
      if (index === 10) {
        this.$router.push('/index/reading')
      }
    },
    handleClickUp () {
      if (this.jumperCurrent === 1 || this.pauseClick) {
        // 妨止过多触发
        return
      }
      let rows = document.getElementsByClassName('screen')
      let twMain = document.getElementsByClassName('tw-main')
      let footer = document.getElementsByClassName('twui-footer')
      if (rows.length > 0) {
        if (this.jumperCurrent === 2) {
          this.pauseClick = true
          //          let tempScroll = twMain[0].scrollTop
          //          let flag = 50
          twMain[0].scrollTop = 0
          this.pauseClick = false
          //          let timer = setInterval(() => {
          //            if (tempScroll - flag <= 0) {
          //              twMain[0].scrollTop = 0
          //              this.pauseClick = false
          //              clearInterval(timer)
          //            } else {
          //              twMain[0].scrollTop = tempScroll - flag
          //              flag += flag
          //            }
          //          }, 100)
          this.jumperCurrent = 1
        } else if (this.jumperCurrent === 3) {
          //          let tempScroll = twMain[0].scrollTop
          //          let flag = 50
          twMain[0].scrollTop = rows[0].scrollHeight + footer[0].scrollHeight
          this.pauseClick = false
          //          let timer = setInterval(function () {
          //            if (tempScroll - flag <= rows[0].scrollHeight + footer[0].scrollHeight) {
          //              twMain[0].scrollTop = rows[0].scrollHeight + footer[0].scrollHeight
          //              this.pauseClick = false
          //              clearInterval(timer)
          //            } else {
          //              twMain[0].scrollTop = tempScroll - flag
          //              flag += flag
          //            }
          //          }, 100)
          this.jumperCurrent = 2
        }
      }
    },
    handleClickDown () {
      if (this.jumperCurrent === this.maxPage || this.pauseClick) {
        // 妨止过多触发
        return
      }
      let rows = document.getElementsByClassName('screen')
      let footer = document.getElementsByClassName('twui-footer')
      let twMain = document.getElementsByClassName('tw-main')
      if (rows.length > 0) {
        if (this.jumperCurrent === 1) {
          this.pauseClick = true
          this.jumperCurrent = 2
          //          let flag = 50
          twMain[0].scrollTop = rows[0].scrollHeight + footer[0].scrollHeight
          this.pauseClick = false
          //          let timer = setInterval(() => {
          //            if (flag > rows[0].scrollHeight + footer[0].scrollHeight) {
          //              flag = rows[0].scrollHeight + footer[0].scrollHeight
          //              twMain[0].scrollTop = flag
          //              this.pauseClick = false
          //              clearInterval(timer)
          //            } else {
          //              twMain[0].scrollTop = flag
          //              flag += flag
          //            }
          //          }, 100)
        } else if (this.jumperCurrent === 2) {
          if (this.jumperCurrent === this.maxPage) {
            return
          }
          this.pauseClick = true
          this.jumperCurrent = 3
          //          let flag = 50
          twMain[0].scrollTop = rows[0].scrollHeight + rows[1].scrollHeight + footer[0].scrollHeight + rows[0].scrollHeight + footer[0].scrollHeight
          this.pauseClick = false
          //          let timer = setInterval(() => {
          //            if (flag > rows[0].scrollHeight + rows[1].scrollHeight + footer[0].scrollHeight) {
          //              flag = rows[0].scrollHeight + rows[1].scrollHeight + footer[0].scrollHeight
          //              twMain[0].scrollTop = flag + rows[0].scrollHeight + footer[0].scrollHeight
          //              this.pauseClick = false
          //              clearInterval(timer)
          //            } else {
          //              twMain[0].scrollTop = flag + rows[0].scrollHeight + footer[0].scrollHeight
          //              flag += flag
          //            }
          //          }, 100)
        }
      }
    }
  }
}
</script>

<style scoped></style>
